<template>
	<view :data-theme="theme">
		<view class="">
			<view class="bg_color" style="height: 200rpx;width: 100%;"></view>
			<view class="card" style="margin-top: -180rpx;padding: 30rpx;">
				<view class="card_top">
					<view style="font-size: 30rpx;font-weight: bold;">
						<text class="miao-sha">秒</text>秒杀
					</view>
					<view style="font-size: 26rpx;color: #999;">
						{{activeData.activeTime}}
					</view>
				</view>
				<view class="active-status">
					已结束
				</view>
				<view style="margin:20rpx 0;border-bottom: 1px solid #f9f6f9"></view>
				<view style="display: flex;">
					<view style="flex-flow: row;display: flex;">
						<view style="flex: 1;">
							<u--image :radius="5" :showLoading="true" :src="activeData.image" width="80px"
								height="80px"></u--image>
						</view>
						<view style="flex: 3;align-items: center;justify-items: center;">
							<view style="display: flex;flex-flow: column;flex: 1;margin: 6px 6px 0 6px;">
								<text class="u-line-1"
									style="font-size: 32rpx;font-weight: bold;margin-bottom: 18rpx;">{{activeData.name}}</text>
								<view class="name-param" style="display: flex;flex-flow: row;">
									<text style="font-size: 14px;color: #999;margin-right: 18rpx;">商品规格</text>
									<text>{{activeData.skuName}}</text>
								</view>
								<view class="name-param" style="display: flex;flex-flow: row;">
									<text style="font-size: 14px;color: #999;margin-right: 18rpx;">售卖区域</text>
									<text>{{activeData.operatyCity}}</text>
								</view>
								<view class="name-param" style="display: flex;flex-flow: row;">
									<text style="font-size: 14px;color: #999;margin-right: 18rpx;">客户范围</text>
									<text>{{activeData.unitName ? activeData.unitName : ''}}</text>
								</view>
								<view style="display: flex;flex-flow: row;margin-top: 12rpx;">
									<text style="font-size: 27rpx;margin-right: 18rpx;">活动价</text>
									<text style="font-weight: 600;font-size: 27rpx;">￥82.50</text>
									<text
										style="text-decoration: line-through;color: #999;margin-left: 18rpx;">￥83.00</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="card" style="padding: 20rpx;">
				<view style="background-color: #fff;">
					<u-tabs :list="tabList" :scrollable="false" @click="tabChangeClick" :lineColor="bgColor"
						:current="currentIndex" :activeStyle="{ color: bgColor,fontWeight: '600'}"
						:inactiveStyle="{color:'#999'}" lineWidth="50"></u-tabs>
				</view>
				<view style="margin:20rpx 0;border-bottom: 1px solid #f9f6f9"></view>
				<view v-if="currentIndex == 0">
					<view class="content">
						<view style="font-size: 32rpx;font-weight: bold;">活动销量数据</view>
					</view>
					<view class="content-bottom">
						<view class="demo-uni-col">
							<view class="demo-uni-col dark" style="color: #999;font-size: 30rpx;">活动商品销量</view>
							<view class="demo-uni-col dark" style="color: #000;font-size: 38rpx;margin-top: 20rpx;">0
							</view>
						</view>
						<view style="line-height: 180rpx;width: 4rpx;background-color: #f7f4f7;">

						</view>
						<view class="demo-uni-col">
							<view class=" dark" style="color: #999;font-size: 30rpx;">剩余秒杀库存</view>
							<view class="demo-uni-col dark" style="color: #000;font-size: 38rpx;margin-top: 20rpx;">200
							</view>
						</view>
					</view>
				</view>
				<view v-if="currentIndex == 1">
					<view class="text_top">
						<view class="text_name">活动时间</view>
						<view class="time_text">
							<text class="text-left" style="color: #999;">
								活动日期
							</text>
							<text class="mgl_15">
								2023.07.22
							</text>
						</view>
						<view class="time_text">
							<text class="text-left" style="color: #999;">
								生效时段
							</text>
							<text class="mgl_15">
								00:00-23:00
							</text>
						</view>
					</view>

					<view style="margin:20rpx 0;border-bottom: 1px solid #f9f6f9"></view>

					<view class="text_top">
						<view class="text_name">活动成本</view>
						<view class="time_text">
							<text class="text-left" style="color: #999;">
								承担方式
							</text>
							<text class="mgl_15">
								合作商自行承担
							</text>
						</view>
					</view>

					<view style="margin:20rpx 0;border-bottom: 1px solid #f9f6f9"></view>

					<view class="text_top">
						<view class="text_name">使用条件</view>
						<view class="time_text">
							<text class="text-left" style="color: #999;">
								客户范围
							</text>
							<text class="mgl_15">
								合作商自行承担
							</text>
						</view>
						<view class="time_text">
							<text class="text-left" style="color: #999;">
								客户限购
							</text>
							<text class="mgl_15">
								限<span style="margin: 0 12rpx;">{{activeData.limitNum}}</span>件
							</text>
						</view>
						<view class="time_text">
							<text class="text-left" style="color: #999;">
								秒杀总库存
							</text>
							<text class="mgl_15">
								限<span style="margin: 0 12rpx;">{{activeData.totalInventory}}</span>件
							</text>
						</view>
					</view>
				</view>

				<view v-if="currentIndex == 2">
					<view style="color: #000;font-size: 28rpx;color: #000;margin-left: 10rpx;">
						<view style="display: flex;margin: 15rpx 0;line-height: 40rpx;">
							<view style="flex: 1;color: #929292;letter-spacing: 4rpx;">
								操作人
							</view>
							<view style="flex: 3;">
								{{activeData.producter}}
							</view>
						</view>
						<view style="display: flex;margin: 15rpx 0;line-height: 40rpx;">
							<view style="flex: 1;color: #929292;letter-spacing: 4rpx;">
								操作动作
							</view>
							<view style="flex: 3;">
								{{activeData.operational}}
							</view>
						</view>
						<view style="display: flex;margin: 15rpx 0;line-height: 40rpx;">
							<view style="flex: 1;color: #929292;letter-spacing: 4rpx;">
								详细信息
							</view>
							<view style="flex: 3;">
								<view
									style="display: flex;flex-flow: column;flex: 1;font-size: 28rpx;">
									<view>
										<text style="margin-right: 10px;">活动日期:</text>
										<text>2024-04-17 00:00:00至2024-04-30 23:59:59</text>
									</view>
									<view>
										<text style="margin-right: 10px;">商品ID:</text>
										<text>101716124</text>
									</view>
									<view>
										<text style="margin-right: 10px;">商品名称:</text>
										<text>[绿色和美]鸭血6kg/箱(20盒)</text>
									</view>
									<view>
										<text style="margin-right: 10px;">活动详情:</text>
										<text>原价83.00元，促销价82.50元</text>
									</view>
									<view>
										<text style="margin-right: 10px;">客户限购:</text>
										<text>限30</text>
									</view>
									<view>
										<text style="margin-right: 10px;">秒杀总库存:</text>
										<text>限200</text>
									</view>

									<!-- <view style="margin-top:10px;border-bottom: 1px solid #ddd"></view> -->
								</view>
							</view>
						</view>
					</view>
					</view>
					
					

					<view style="height: 30rpx;"></view>
				</view>
			</view>
		</view>
</template>

<script>
	import {
		setThemeColor
	} from '@/utils/setTheme.js'
	let app = getApp();
	export default {
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				activeData: {
					brandName: '',
					image: 'http://192.168.1.29:8080/img_xyt/public/product/2024/04/23/3669c2389d38458582e36ee84d6fe235o80gc46lgn.png',
					name: "一次性餐具包四件套",
					skuName: '10斤/袋(1000包)', //活动状态
					datailContent: "提报价格需低于招商指导价，相同商品取提报活动价低品优先展示，给出价格力度越高，提报成功率越高。",
					// starTime: "2024.4.30 00:00-23:00",
					activeTime: "2024.04.30 00:00-23:00",
					operatyCity: '北京', //1直接生效
					limitNum: 30,
					totalInventory: 200,
					producter:'合作商',
					operational:'确认秒杀活动',
				},
				// ---------活动数据---------
				currentIndex: 0,
				tabList: [],
			};
		},
		onLoad() {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.tabList = [{
					id: "tab11",
					title: "",
					name: "活动数据",
					type: 1,
					count: 0,
				},
				{
					id: "tab12",
					title: "",
					name: "活动规则",
					type: 2,
					count: 0,
				},
				{
					id: "tab13",
					title: "",
					name: "操作记录",
					type: 3,
					count: 0,
				}
			];
		},
		methods: {
			tabChangeClick(item) {
				this.currentIndex = item.index;
			},
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.card {
		margin: 0 20rpx 20rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.mgl_15 {
		margin-left: 30rpx;
	}

	.card_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.miao-sha {
		border-radius: 8rpx;
		background-color: #812dc5;
		color: #fff;
		padding: 2rpx 6rpx;
		font-size: 26rpx;
		margin: 0 10rpx 0 0;
	}

	.name-param {
		line-height: 44rpx;
	}

	.active-status {
		color: #999;
		margin-top: 20rpx;
	}

	.text_top {
		margin: 30rpx 0 20rpx 10rpx;

		.text_name {
			font-size: 32rpx;
			font-weight: bold;
			margin: 20rpx 0;
		}

		.time_text {
			font-size: 30rpx;
			color: #000000;
			display: flex;
			line-height: 50rpx;
		}
	}

	.content {
		display: flex;
		line-height: 90rpx;
		align-items: center;
		margin-left: 30rpx;
	}

	.content-bottom {
		margin-top: 10rpx;
		display: flex;
		justify-content: space-evenly;
	}

	.demo-uni-col {
		display: flex;
		flex-flow: column;
		align-items: center;
	}
</style>